let setting = document.querySelector('.setting');
let angle = document.querySelector('.angle');
let direction = document.querySelector('.direction');
let color = document.querySelector('.color');
let body = document.querySelector('body');
list = [
    document.querySelector('.begin .red'),
    document.querySelector('.begin .green'),
    document.querySelector('.begin .blue'),
    document.querySelector('.mid .red'),
    document.querySelector('.mid .green'),
    document.querySelector('.mid .blue'),
    document.querySelector('.end .red'),
    document.querySelector('.end .green'),
    document.querySelector('.end .blue')
];
let wti_setting_click = false;

function parseGradient(gradientString) {
    const regex1 = /\(.*?d/;
    const match1 = regex1.exec(gradientString);
    let angle = match1[0].slice(1, -1);
    const regex2 = /g,.*?\)/;
    const match2 = regex2.exec(gradientString);
    let color = [];
    let value = [];
    color[0] = match2[0].slice(2);
    const regex3 = /%,.*?\)/;
    const match3 = regex3.exec(gradientString);
    color[1] = match3[0].slice(2);
    let string = gradientString.replace(match3[0], "");
    const regex4 = /%,.*?\)/;
    const match4 = regex4.exec(string);
    color[2] = match4[0].slice(2);
    let regexn = [/\(.{0,4},/, /,.{0,4},/, /,.{0,4}\)/];
    for (let i = 0; i < 9; ++i) {
        let midd = regexn[i % 3].exec(color[(i / 3) | 0]);
        value[i] = midd[0].slice(1, -1).trim();
    }
    return { angle, color, value };
}
let now_changingcolor = {};
setting.addEventListener('click', function () {
    if (!wti_setting_click) {
        wti_setting_click = true;
        angle.style.display = 'flex';
        color.style.display = 'flex';
        const bgImage = window.getComputedStyle(document.body).backgroundImage;
        now_changingcolor = parseGradient(bgImage);

        direction.value = now_changingcolor.angle;
        for (let i = 0; i < 9; ++i) {
            list[i].value = now_changingcolor.value[i];
            switch (i % 3) {
                case 0:
                    list[i].style.background = 'rgb(' + now_changingcolor.value[i] + ', 0, 0)';
                    break;
                case 1:
                    list[i].style.background = 'rgb(0,' + now_changingcolor.value[i] + ', 0)';
                    break;
                case 2:
                    list[i].style.background = 'rgb(0, 0, ' + now_changingcolor.value[i] + ')';
                    break;
                default: break;
            }
        }
    } else {
        wti_setting_click = false;
        angle.style.display = 'none';
        color.style.display = 'none';
    }
});
list.forEach(function (element, index) {
    element.addEventListener('input', function () {
        body.style.backgroundImage = 'linear-gradient(' + direction.value + 'deg, rgb(' + list[0].value + ',' + list[1].value + ',' + list[2].value + ') 0%,rgb(' + list[3].value + ',' + list[4].value + ',' + list[5].value + ') 29%, rgb(' + list[6].value + ',' + list[7].value + ',' + list[8].value + ') 100%)';
        switch (index % 3) {
            case 0:
                list[index].style.background = 'rgb(' + list[index].value + ', 0, 0)';
                break;
            case 1:
                list[index].style.background = 'rgb(0,' + list[index].value + ', 0)';
                break;
            case 2:
                list[index].style.background = 'rgb(0, 0, ' + list[index].value + ')';
                break;
            default: break;
        }
    });
});

direction.addEventListener('input', function () {
    body.style.backgroundImage = 'linear-gradient(' + direction.value + 'deg, rgb(' + list[0].value + ',' + list[1].value + ',' + list[2].value + ') 0%,rgb(' + list[3].value + ',' + list[4].value + ',' + list[5].value + ') 29%, rgb(' + list[6].value + ',' + list[7].value + ',' + list[8].value + ') 100%)';

});

